<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title">uniCloud 基本操作</view>

    <!-- 按钮容器 -->
    <view class="btn-group">
      <!-- 按钮1：添加用户 -->
      <button class="btn btn-default" @click="handleAddUser">添加用户</button>

      <!-- 按钮2：用户列表（带边框高亮） -->
      <button class="btn btn-border" @click="handleUserList">用户列表</button>

      <!-- 按钮3：getObject（文字蓝色） -->
      <button class="btn btn-text-blue" @click="handleGetObject">getObject</button>

      <!-- 按钮4：云对象（蓝色背景） -->
      <button class="btn btn-bg-blue" @click="handleCloudObj">云对象</button>

      <!-- 按钮5：clientDB（文字红色） -->
      <button class="btn btn-text-red" @click="handleClientDB">clientDB</button>

      <!-- 按钮6：上传图片（文字红色） -->
      <button class="btn btn-text-red" @click="handleUploadImg">上传图片</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleAddUser() {
      // 「添加用户」逻辑
      uni.showToast({ title: '点击了添加用户', icon: 'none' })
    },
    handleUserList() {
      // 「用户列表」逻辑 - 新增页面跳转
      uni.navigateTo({
        url: '/pages/UniCloud/getUser/getUser' // 跳转到数据展示页面（路径需和实际文件一致）
      })
    },
    handleGetObject() {
      // 「getObject」逻辑
      uni.showToast({ title: '点击了getObject', icon: 'none' })
    },
    handleCloudObj() {
      // 「云对象」逻辑
      uni.showToast({ title: '点击了云对象', icon: 'none' })
    },
    handleClientDB() {
      // 「clientDB」逻辑
      uni.showToast({ title: '点击了clientDB', icon: 'none' })
    },
    handleUploadImg() {
      // 「上传图片」逻辑
      uni.showToast({ title: '点击了上传图片', icon: 'none' })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #fff;
}

.title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  margin: 30rpx 0;
}

/* 按钮容器：垂直排列，宽度100% */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx; /* 按钮之间的间距 */
}

/* 基础按钮样式 */
.btn {
  width: 100%;
  padding: 20rpx 0;
  font-size: 28rpx;
  border-radius: 8rpx;
  /* 去除uni-app默认按钮样式 */
  background-color: transparent;
  border: none;
  outline: none;
}

/* 按钮1：默认样式（浅灰背景） */
.btn-default {
  background-color: #f5f5f5;
  color: #333;
}

/* 按钮2：边框高亮（红色边框） */
.btn-border {
  background-color: #f5f5f5;
  color: #333;
  border: 2rpx solid #f00;
}

/* 按钮3：文字蓝色 */
.btn-text-blue {
  background-color: #f5f5f5;
  color: #007aff;
}

/* 按钮4：蓝色背景 */
.btn-bg-blue {
  background-color: #007aff;
  color: #fff;
}

/* 按钮5-6：文字红色 */
.btn-text-red {
  background-color: #f5f5f5;
  color: #f00;
}
</style>